<template>
    <div class="top-login" :class="{ 'active': isIndex }">
        <div class="wid-1200">
            <a href="#" class="panoramic360">
                <img src="@/assets/images/icon-360.png" >
                <img src="@/assets/images/icon-360-active.png" >
            </a>
            <div class="login-search">
                <div class="search-box">
                    <input type="search" placeholder="搜索" v-model="value">
                    <button @click="doSearch"><img src="@/assets/images/icon-search.png"></button>
                </div>
                <div class="login-box" v-show="isCenter==false">
                    <!-- <router-link to="/registered"> -->
                    <router-link to="">
                        <i><img src="../../assets/images/icon-registe.png" alt=""></i>
                        <i><img src="../../assets/images/icon-registe-active.png" alt=""></i>
                        <span>注册</span>
                    </router-link>
                    <!-- <router-link to="/login"> -->
                    <router-link to="">
                        <i><img src="../../assets/images/icon-login.png" alt=""></i>
                        <i><img src="../../assets/images/icon-login-active.png" alt=""></i>
                        <span>登录</span>
                    </router-link>
                </div>
                <div class="center-box" v-show="isCenter==true">
                   <router-link to="/center">
                        <div class="img-box">
                        <img src="../../assets/images/center-avatar.png" alt="">
                    </div>
                    <span>peaer0123</span>
                   </router-link>
                    <div class="drop-down">
                        <ul>
                            <li>
                                <div class="img-box">
                                    <img class="img" src="../../assets/images/icon-advisory.png" alt="">
                                    <img class="img-active" src="../../assets/images/icon-advisory-active.png" alt="">
                                </div>
                                <p>咨询记录</p>
                            </li>
                            <li>
                                <div class="img-box">
                                    <img class="img" src="../../assets/images/icon-complaint.png" alt="">
                                    <img class="img-active" src="../../assets/images/icon-complaint-active.png" alt="">
                                </div>
                                <p>投诉记录</p>
                            </li>
                            <li>
                                <div class="img-box">
                                    <img class="img" src="../../assets/images/icon-help.png" alt="">
                                    <img class="img-active" src="../../assets/images/icon-help-active.png" alt="">
                                </div>
                                <p>求助记录</p>
                            </li>
                            <li>
                                <div class="img-box">
                                    <img class="img" src="../../assets/images/icon-exit.png" alt="">
                                    <img class="img-active" src="../../assets/images/icon-exit-active.png" alt="">
                                </div>
                                <p>退出</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        props:{
            isIndex:Boolean,
            isCenter:{
                type:Boolean,
                default:false,
            }
        },
        data(){
            return{
                value:'纪念'
            }
        },
        methods:{
            doSearch(){
                // this.$router.push({path:'/search',query:{'value':this.value}})
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "@/assets/css/basis";
    .top-login{
        width: 100%;
        background-color: #2E2E2E;
        &.active{
            background-color: transparent;
        }
        >div{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 46px;
            margin: 0 auto;
            .panoramic360 {
                img{
                    width:56px ;
                    &:nth-of-type(2){
                        display: none;
                    }
                }
                &:hover{
                    img{
                        &:nth-of-type(1){
                            display: none;
                        }
                        &:nth-of-type(2){
                            display: block;
                        } 
                    }
                }
            }
        }
        .search-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width:200px;
            height:24px;
            padding: 0 16px;
            background:#fff;
            border-radius:12px;
            input{
                flex: 1;
                height: 24px;
                line-height: 24px;
                position: relative;
                /*padding: 0 4px;*/
                font-size: 12px;
                caret-color:#47C8EC;
            }
            button{
                width: 14px;
                background-color: transparent;
                border: 0;
            }
        }
        .login-search {
            display: flex;
            align-items: center;
        }
        .login-box {
            display: flex;
            a{
                display: flex;
                align-items: center;
                margin-left: 24px;
                color: #fff;
                >i{
                    &:nth-of-type(2){
                        display: none;
                    }
                }
                img{
                    margin-right: 4px;
                    width: 20px;
                }
                &:nth-of-type(1):hover{
                    color: $colorEarth;
                    >i{
                        &:nth-of-type(1){
                            display: none;
                        }
                        &:nth-of-type(2){
                            display: block;
                        }
                    }
                }
                &:nth-of-type(2):hover{
                    color: $colorEarth;
                    >i{
                        &:nth-of-type(1){
                            display: none;
                        }
                        &:nth-of-type(2){
                            display: block;
                        }
                    }
                }
            }
        }
        .center-box{
            position: relative;
            margin-left:25px;
            >a{
                height:46px;
                color:#fff;
                display: flex;
                align-items: center;
                font-size: 14px;
                >.img-box{
                    width: 26px;
                    height:26px;
                    margin-right:5px;
                    border-radius:50%;
                    overflow: hidden;
                }
            }
            .img-box{
                width: 26px;
                height:26px;
                margin-right:5px;
                border-radius:50%;
                overflow: hidden;
            }
            .drop-down{
                position: absolute;
                left:0;
                bottom:0;
                transform: translateY(100%);
                width:150px;
                height:auto;
                overflow: hidden;
                z-index: 999;
                >ul{
                    padding:20px;
                    position: relative;
                    width:100%;
                    transform: translateY(-100%);
                    background-color: #fff;
                    box-shadow:0px 1px 8px 0px rgba(0, 0, 0, 0.1);
                    transition:all .6s;
                    li{
                        height:40px;
                        display: flex;
                        font-size:14px;
                        color:#999;
                        cursor:pointer;
                        >.img-box{
                            width:20px;
                            margin-right:5px;
                            .img-active{
                                display:none;
                            }
                        }
                        >p{
                            flex:1;
                        }
                        &.active{
                            color:$colorEarth;
                            .img{
                                display:none;
                            }
                            .img-active{
                                display:block;
                            }
                        }
                    }
                }
            }
            &:hover{
                .drop-down{
                    >ul{
                        transform:translate(0,0);
                    }
                }
            }
        }
    }
</style>
